<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js完成表单校验</title>
<!--    <script>
        function checkForm() {
            // 检验是否写错方法名
            // alert("aa");
            // 1.获取用户输入的数据
            var uValue = document.getElementById("user").value;
            // alert(uValue);
            if(uValue==""){
                //    2.给出错误提示信息
                alert("用户名不能为空");
                return false;
            }
            //    校验密码
            var pValue = document.getElementById("pass").value;
            // alert(uValue);
            if(pValue==""){
                //    2.给出错误提示信息
                alert("密码不能为空");
                return false;
            }
            //    校验确认密码
            var rpValue = document.getElementById("repass1").value;
            // alert(uValue);
            if(rpValue  !=pValue){
                //    2.给出错误提示信息
                alert("两次密码输入不一样");
                return false;
            }
            //    校验邮箱
            var eValue = document.getElementById("email").value;
            // alert(uValue);
            if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                //    2.给出错误提示信息
                alert("邮箱格式不正确");
                return false;
            }
        }
    </script>-->
    <script>
        function focuser(id,text) {
            document.getElementById(id).innerHTML="<font color='gray'>"+text+"</font>";
        }

        function tis(id,text) {
            var alue = document.getElementById(id).value;
            if (alue == 0){
                document.getElementById(id+"apan").innerHTML="<font color='red'>"+text+"</font>";
            }else {
                document.getElementById(id+"apan").innerHTML="<font color='red'>"+ +"</font>";
            }
        }


    </script>
</head>
<body>
<form action="#" method="get" name="regForm" onsubmit="return checkForm()  ">
    <table border="1px" align="center" width="1300px" cellpadding="opx" cellspacing="0px">
        <!--        logo部分-->
        <tr>
            <td>
                <!--                    嵌套一个一行三列的表格-->
                <table border="1px" width="100%">
                    <tr heigth="50px">
                        <td width="33.3%">
                            <img src="../../../img/logo2.png" height="47px"  />
                        </td >
                        <td width="33.3%">
                            <img src="../../../img/header.png" height="47px"  />
                        </td>
                        <td width="33.3%">
                            <a href="#">登录</a>
                            <a href="#">注册</a>
                            <a href="#">购物车</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        2.导航栏部分-->
        <tr height="50px">
            <td bgcolor="black">
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="#">
                    <font size="5" color="white">首页</font>
                </a>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="#">
                    <font size="5" color="white">手机数码</font>
                </a>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="#">
                    <font size="5" color="white">电脑办公</font>
                </a>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="#">
                    <font size="5" color="white">鞋靴箱包</font>
                </a>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="#">
                    <font size="5" color="white">家用电器</font>
                </a>
            </td>
        </tr>
        <!--        3.注册表单-->
        <tr>
            <td height="600px" background="../../../img/regist_bg.jpg">
                <!--                    嵌套一个十行二列的表格-->
                <table border="1px" width="750px" height="360px" align="center" cellspacing="0px" cellpadding="0px">
                    <tr height="40px">
                        <td colspan="2">
                            <font size="4">会员注册</font>&nbsp;&nbsp;&nbsp;&nbsp;USE REGISTER
                        </td>
                    </tr>
                    <tr>
                        <td>
                            用户名
                        </td>
                        <td>
                            <input name="username" type="text" size="34px" id="user" onfocus="focuser('userapan','请输入用户名')"
                                   onblur="tis('user','此项不能为空')"><span id="userapan"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            密码
                        </td>
                        <td>
                            <input name="password" type="password" size="34px" id="pass"
                                   onfocus="focuser('passapan','请输入密码')" onblur="tis('pass','此项不能为空')"><span id="passapan"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            确认密码
                        </td>
                        <td>
                            <input name="repassword" type="password" size="34px" id="repass1"
                                   onfocus="focuser('repass1apan','请再次输入密码')" onblur="tis('repass1','此项不能为空')"><span id="repass1apan"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Emaile
                        </td>
                        <td>
                            <input name="email" type="text" size="34px" id="email"
                              onfocus="focuser('emailapan','请输入邮箱地址')" onblur="tis('email','此项不能为空')"><span id="emailapan"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            姓名
                        </td>
                        <td>
                            <input name="name" type="text" size="34px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            性别
                        </td>
                        <td>
                            <input name="max" type="radio" value="男">男<input name="max" type="radio" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td>
                            出生日期
                        </td>
                        <td>
                            <input name="brithday" type="text" size="34px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            验证码
                        </td>
                        <td>
                            <input type="text" name="yzm">
                            <img src="../../../img/yanzhengma.png" >
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="注册">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        4.广告图片-->
        <tr>
            <td>
                <img src="../../../img/footer.jpg" width="100%" />
            </td>
        </tr>
        <!--        5.友情链接和版权信息-->
        <tr>
            <td align="center">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">招贤纳士</a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
                <a href="#">服务声明</a>
                <a href="#">广告声明</a>
                <p>
                    Copyright @ 22019-4-30 传智商城 版权所有
                </p>
            </td>
        </tr>
    </table>
</form>
</body>
</html>